<template>
  <el-row>
    <div style="display:block;text-align:center;padding:5px;height:50px;line-height: 50px">
      <img :src="logo" height="90%" width="55%" title="学校管理系统" />
      <!-- <span>学校管理系统</span> -->
    </div>
    <el-col>
      <el-menu :default-active="active" class="el-menu-vertical-demo" mode="vertical" :collapse-transition='false'
        :collapse='isCollapse' :unique-opened="true" router>
        <el-menu-item index="/" @click="saveItem">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <sidebarItem :tree="menuList" />
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
import sidebarItem from "@/components/menu/sidebarItem";

export default {
  name: "sidebarIndex",
  components: {
    sidebarItem
  },
  data() {
    return {
      logo: require("@/assets/logo.png"),
      menuList: [],
      active: "",
      isCollapse: false,
    }
  },
  created() {
    this.getMenuList()
  },
  methods: {
    getMenuList() {
      this.active = localStorage.getItem("active") || '';
      this.$axios.get("/menu/getMenus", {
        headers: {
          Authorization: localStorage.getItem("token")
        }
      }).then(res => {
        this.menuList = res.data.data
        this.$store.commit("SET_ROUTERS", this.menuList)
      })
    },
    saveItem() {
      this.active = "/"
      this.$store.commit("SET_ACTIVE", "/")

      //标签块
      let tag = {
        id: 'index',
        name: '首页',
        path: '/',
        type: 'info'
      }
      this.$store.commit("SET_TAGVAL", tag)

    }
  },
  computed: {
    data() {
      return this.$store.getters.getControllerBtn
    }
  },
  watch: {
    '$store.getters.getControllerBtn': function (val) {
      this.isCollapse = val
    },
    '$store.getters.getRouters': function (newVal) {
      this.menuList = newVal //当菜单数据被修改时就会触发
    },
    '$store.getters.getActive': function (newVal) {
      this.active = newVal //当菜单数据被修改时就会触发
    }
  }
}
</script>

<style scoped>
.el-menu {
  border-right: none;
}
</style>
